<template>
  <div class="dm">
    <div class="dm-full" :style="{width: pageWidth+'px'}">
      <div class="dm-query">
        <!-- 查询栏，见：\src\utils\QueryBar.vue -->
        <QueryBar @onChange="doQueryChange" />
      </div>
      <div class="dm-data" v-loading="dataRowsLoading">
         <!-- 分页栏，见：\src\utils\DataTableUtils.js -->
          <div class="dm-data-top">
            <a-pagination v-model="pagination.current"
                          class="dm-data-page"
                          :total="pagination.total"
                          :default-page-size="pagination.defaultPageSize"
                          :show-total="pagination.showTotal"
                          size="small"
                          @change="doPageChange" />
            <div class="dm-data-actions">
              <a-popconfirm :disabled="dataRowsSelected.length==0" title="您确定要删除选中的数据吗？" placement="left" @confirm="doDelete()">
                <a-button :disabled="dataRowsSelected.length==0">删除</a-button>
              </a-popconfirm>
              <a-button @click="doAdd">新增</a-button>
            </div>
          </div>
          <!-- 表单table，见：\src\utils\DataTableUtils.js -->
          <Table :data="dataRows" size="small" stripe highlight-current-row
                 :height="pageHeight-107"
                 @select="doTableSelect"
                 @select-all="doTableSelect"
                 @row-click="doTableRowClick"
                 @row-dblclick="doTableRowDblclick"
                 @sort-change="doTableSortChange"
          >
            <TableColumn type="selection" width="35" />
            <TableColumn prop="customerName" label="企业名称" width="220" sortable="custom" fixed />
            <TableColumn prop="projName" label="项目名称" width="100" sortable="custom" />
            <TableColumn prop="setupTime" label="项目设立时间" width="120" sortable="custom" />
            <TableColumn prop="needAudit" label="立项要否审批" min-width="250" sortable="custom">
              <template slot-scope="{row}">
                <a-tag v-if="row.needAudit=='1'" color="#2db7f5" title="是">是</a-tag>
                <a-tag v-else color="#999999" title="否"  type="primary">否</a-tag>
              </template>
            </TableColumn>
            <TableColumn prop="securityCategory1Name" label="项目安全大类" width="160" sortable="custom" />
            <TableColumn prop="securityCategory2Name" label="项目安全细类" width="160" sortable="custom" />
            <TableColumn label="操作" width="120" fixed="right">
              <a-button-group slot-scope="{row}">
                <a-button size="small" @click="doEdit(row)">修改</a-button>
              </a-button-group>
            </TableColumn>
          </Table>
      </div>
    </div>
  </div>
</template>
<script>
import DataTableUtils from '@/utils/DataTableUtils.js'

import QueryBar from './QueryBar.vue'

const EditFile = '/proj/project/edit.vue'

export default {
  //混入工具
  mixins: [DataTableUtils],
  //使用组件
  components: {QueryBar},
  data() {
    return {
      //后台服务地址-查询（自定义query增强版）
      dataRowsQueryUrl: '/jsofted/project/queryEnhance',
      //后台服务地址-删除
      dataRowsDeleteUrl: '/jsofted/project/delete/',
      //后台服务地址-更新
      updateUrl: '/jsofted/project/update/',
    }
  },
  methods: {
    //新增
    doAdd() {
      this.$store.dispatch('ctx/openPage', {
        path: EditFile,
        title: '新增项目信息',
        params: {}
      })
    },
    //编辑
    doEdit(record) {
      this.$store.dispatch('ctx/openPage', {
        path: EditFile,
        title: '【' + record.customerName + '】项目信息',
        params: {
          id: record.id
        }
      })
    },
    // doEditStatus(record, statusCode) {
    //   const formData = {
    //     statusCode: statusCode
    //   }
    //   this.$http.post(this.updateUrl + record.id, formData).then((rs) => {
    //     const result = rs.data
    //     if (result.success) {
    //       this.$message.success(result.message)
    //       this.queryDataRows()
    //     } else {
    //       this.$alert.error({
    //         title: result.message,
    //       })
    //     }
    //   })
    // },
  }
}
</script>
